<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自友行</title>
    <link href="../css/home/free_travel.css" rel="stylesheet">
</head>
<body class="body" >
<!--===================1.头部导航 nav=================-->
<div class="nav">
    <div class="nav-item">
        <div class="item-logo">
            <a href="#"></a>
        </div>
        <ul class="item-lists">
            <li class="list-item"><a href="#">首页</a></li>
            <li class="list-item"><a href="#">目的地</a></li>
            <li class="list-index"><a href="#">自由行</a></li>
            <li class="list-item"><a href="#">旅游定制</a></li>
            <li class="list-item"><a href="#">游记社区</a></li>
        </ul>

        <div class="nav-login">
            <a href="#">
                <i class="login-logo"></i>
                <span class="login-title">登录</span>
            </a>
            <a href="#">
                <i class="register-logo"></i>
                <span class="login-title">注册</span>
            </a>
        </div>
    </div>
</div>
<!--========================2,搜索页面====================-->
<div class="map-content">

    <div class="map-detail">
        <div class="buttons">
            <span>出发地</span>
            <div class="shuru">
                <input type="text" id="chufadi"/>
                <img src="../images/customer/" alt=""/>
                <ul id="chufaul">

                </ul>
            </div>
            <div class="chengepo">
                <img src="../img/changeposition.png" alt=""/>
            </div>
            <span>目的地</span>
            <div class="shuru">
                <input type="text" id="mudidi"/>
                <img src="../img/tosw.png" alt=""/>
                <ul id="mudiul">

                </ul>
            </div>
            <div class="map-srch">查询</div>
        </div>

    </div>
</div>
<!--==============筛选列表==================-->
<div class="sift">
    <div class="sift-type">
        <a class="all">全部</a>
        <a class="diy">自由行定制</a>
    </div>
    <div class="sift-lists">

        <div class="list-item">
            <label>出发日期：</label>
            <ul>
                <form>
                    <li><input type="checkbox" class="selAll">不限</li>
                    <li><input type="checkbox" class="selOne">9月</li>
                    <li><input type="checkbox" class="selOne">10月</li>
                    <li><input type="checkbox" class="selOne">11月</li>
                    <li><input type="checkbox" class="selOne">12月</li>
                </form>

            </ul>
        </div>
        <div class="list-item">
            <label>门票价格区间：</label>

            <ul>
                <form>
                    <li><input type="checkbox">不限</li>
                    <li><input type="checkbox">0-200</li>
                    <li><input type="checkbox">201-400</li>
                    <li><input type="checkbox">401-1000</li>
                </form>
            </ul>
        </div>
        <div class="list-item">
            <label>景点星级：</label>
            <ul>
                <form>
                    <li><input type="checkbox">不限</li>
                    <li><input type="checkbox">1星级</li>
                    <li><input type="checkbox">2星级</li>
                    <li><input type="checkbox">3星级</li>
                    <li><input type="checkbox">4星级</li>
                    <li><input type="checkbox">5星级</li>
                </form>

            </ul>
        </div>
        <div class="list-item">
            <label>景点类型：</label>
            <ul>
                <form>
                    <li><input type="checkbox">不限</li>
                    <li><input type="checkbox">寺庙</li>
                    <li><input type="checkbox">水上乐园</li>
                    <li><input type="checkbox">动物园</li>
                </form>
            </ul>
        </div>
    </div>
</div>


<script src="../js/free-travel.js"></script>
<!--==============3,推荐页面===============-->

<div class="list-wrap" data-list="1"href="#" id="listContent" style="display: block;">
    </a>
    <a class="item clearfix" href="#" target="_blank">
        <div class="image">
            <img src="../images/customer/41.jpg" height="150px" width="200px"
>

        </div>
        <div class="detail">
            <div class="info" style="position: relative;">
                <p>已售545</p>
                <h3>
                    【防疫专享】私家定制团·三亚5日情侣/闺蜜/亲子游 三亚攻略（包车纯玩+网红一线海边酒店多湾区可选+蜈支洲岛一整天+亚特兰蒂斯水世界+三亚千古情等 多款必玩体验任选）
                </h3>
            <div class="extra">
                <div class="action">
                    <span class="btn">立即预定</span>
                    <div class="promo-tag">
                    </div>
                </div>
                <span class="price"><b>￥</b><strong>920</strong>起</span
            </div>
        </div>
        </div>

    </a>

    <a class="item clearfix" href="#" target="_blank">
        <div class="image">
            <img src="../images/customer/41.jpg" height="150px" width="200px
">
        </div>
        <div class="detail">
            <div class="info" style="position: relative;">
                <p>已售545</p>
                <h3>
                    【防疫专享】私家定制团·三亚5日情侣/闺蜜/亲子游 三亚攻略（包车纯玩+网红一线海边酒店多湾区可选+蜈支洲岛一整天+亚特兰蒂斯水世界+三亚千古情等 多款必玩体验任选）
                </h3>
            <div class="extra">
                <div class="action">
                    <span class="btn">立即预定</span>
                    <div class="promo-tag">
                    </div>
                </div>
                <span class="price"><b>￥</b><strong>920</strong>起</span>


            </div>
        </div>
        </div>
    </a>
</div>